<template>
  <div>
      <el-card>
      <!--查询添加-->
          <el-row>
              <el-col :span="8">
                  <el-input placeholder="请输入内容" clearable v-model="queryString" class="input-with-select" @clear="findPage">
                     <el-button slot="append" icon="el-icon-search" @click="findPage"/>
                  </el-input>
              </el-col>
          </el-row>
          <!--列表-->
          <el-table :data="tableList" stripe  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"  row-key="id" >
                <el-table-column type="index" label="序号" />
                <el-table-column prop="id" label="评论id" show-overflow-tooltip/>
                <el-table-column prop="content" label="评论内容" />
                <el-table-column prop="nickName" label="创建人" />
                <el-table-column prop="time" label="创建时间" />
                <el-table-column prop="target" label="目标用户名" />
                <el-table-column label="审核状态">
                    <template slot-scope="scope">
                        <el-switch @change="updateStatus(scope.row)" v-model="scope.row.status" />
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="180">
                  <template slot-scope="scope">
                        <el-button type="danger" @click="deleteById(scope.row.id)"   size="small"  icon="el-icon-delete" circle/>
                  </template>
                </el-table-column>
          </el-table>
        <!--底部分页条-->
          <el-pagination
            @size-change="handlePageSize"
            @current-change="handlePageNumber"
            :current-page="currentPage4"
            :page-sizes="[7, 25, 50, 100]"
            :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"/>
      </el-card>
  </div>
</template>

<script>
import {marked} from "marked";
export default {
  data(){
      return {
          queryInfo: {
            //页码
            pageNumber: 1,
            //页数
            pageSize: 7,
            //关键字
            queryString: ""
          },
          queryString:"",
          //表格数据
          tableList:[],
          //总记录数
          total: 0,
          currentPage4: 1
      }
  },
  methods:{
        //查询
        findPage(){
            if(this.queryString == ""){
              this.queryInfo.queryString = "moment::"+"test";
            }else{
              this.queryInfo.queryString = "moment::"+this.queryString;
            }
            
            this.$ajax.post("/comment/findAllComment", this.queryInfo).then((res)=>{
                this.tableList = res.data.rows;
                this.total = res.data.total;
            });
        },

        //分页
        //页面改变事件
        handlePageNumber(newPageNumber){
          //将分页的新数据的参数传递给后端查询
          this.queryInfo.pageNumber = newPageNumber;
          //调分页方法
          this.findPage();
        },
        handlePageSize(newPageSize){
          this.queryInfo.pageSize = newPageSize;
          this.findPage();
        },

        //删除
        //删除权限信息
        deleteById(id){
          this.$confirm('您将永久删除id是{' + id +' }的新闻资讯, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            //调用后端删除权限接口
            this.$ajax.delete(`/comment/delete/${id}`).then(res => {
              this.$message.success(res.data.message);
              this.queryInfo.pageNumber = 1;
              this.findPage();
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },

        //审核
        /*改变审核的状态*/
        updateStatus(row){
            this.$ajax.put(`/comment/updateStatus/${row.id}`).then((res)=>{
                this.$message.success("状态更新成功！")
            })
        },
      },
      created(){
          this.findPage();
      }
}
</script>

<style>

</style>